<template>
  <div id="Giftcard">
    <div class="titleBox">
      <div class="title">
        我的礼品卡
      </div>
    </div>
    <div class="cardBox">
      <div class="header">
        <div class="left">
          <div
            v-for="(item, index) in statuList"
            :key="item.status"
            class="title"
            :class="{ active: tabIndex == index }"
            @click="selectedIndex(item, index)"
          >
            {{ item.title }}({{ DataIndex[item.status] }})
          </div>
        </div>
        <!-- <div
          class="buttons"
          @click="ExportGiftCard"
        >
          导出礼品卡
        </div> -->
      </div>
    </div>
    <div class="search_box">
      <div class="left">
        <div 
          v-if="TabStatus === 0" 
          class="vif_box"
        >
          <div
            class="item sm"
            :class="{activesmall: Sorting === 1}"
            @click="ClickSorting(1)"
          >
            礼品金额
          </div>
          <div class="item shu">
            |
          </div>
          <div
            class="item sm"
            :class="{activesmall: Sorting === 2}"
            @click="ClickSorting(2)"
          >
            过期时间
          </div>
        </div>
      </div>
      <div class="right">
        <el-input
          v-model="number"
          placeholder="卡号或卡密"
          suffix-icon="el-icon-search"
          size="mini"
          @change="Search($event, TabStatus)"
        />
      </div>
    </div>
    <div class="list_box">
      <GiftcardList
        :giftcardlist="GiftcardListData"
        :tabstatus="TabStatus"
        :pagetotal="PageTotal"
        @handleCurrentChange="handleCurrentChange"
        @DeleteCart="DeleteCart"
      />
    </div>
  </div>
</template>

<script>
import GiftcardList from "../../components/Assets/GiftcardList.vue";
export default {
  name: "Name",
  components: {
    GiftcardList,
  },
  data() {
    return {
      tabIndex: 0,
      TabStatus: 0,
      Sorting: 0, // 礼品金额和过期时间
      searchtext: "", // 搜索
      sequence: 0, // 升序还是降序 1.倒序 0升序
      number: "", // 搜索
      orderBy: "createDate", // 排序字段 reduceAmount:礼品卡金额 expireEndDate： 过期时间
      pageIndex: 1, // 分页索引
      pageSize: 20, // 单页数据量
      GiftcardListData: [],
      PageTotal: 0,
      DataIndex: [],
      statuList: [
        // 0:UNUSED(“未使用”) 2:USED(“已使用”) 3:OBSOLETE(“已作废”)
        {
          status: 0,
          title: "已购买",
          statusName: "UNUSED",
        },
        {
          status: 1,
          title: "已使用",
          statusName: "USED",
        },
        {
          status: 2,
          title: "已作废",
          statusName: "OBSOLETE",
        },
        {
          status: 9,
          title: "已转让",
          statusName: "",
        },
      ],
    };
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.getMemberGiftCardsListData(
      this.TabStatus,
      this.orderBy,
      this.sequence,
      this.number
    );
    this.ClientServergetCountGiftCardData();
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    //选择状态
    selectedIndex(item, index) {
      console.log("选择状态", item, index);
      this.tabIndex = index;
      this.TabStatus = item.status;
      this.number = "";
      this.getMemberGiftCardsListData(
        this.TabStatus,
        this.orderBy,
        this.sequence,
        this.number
      );
    },
    // 导出礼品卡
    ExportGiftCard() {
      console.log("导出礼品卡");
    },
    // 删除
    DeleteCart(DeleteCart) {
      console.log("删除刷新列表", DeleteCart);
      this.getMemberGiftCardsListData(DeleteCart, this.orderBy, this.sequence, this.number)
    },
    // 获取礼品卡角标
    ClientServergetCountGiftCardData() {
      let params = {
        token: localStorage.getItem("token"),
        data: {},
      };
      this.$api.person.ClientServergetCountGiftCard(params).then((res) => {
        console.log("获取礼品卡角标", res);
        this.DataIndex = res.data;
      });
    },
    // 礼品金额和过期时间
    ClickSorting(ClickSorting) {
      this.Sorting = ClickSorting;
      if (this.Sorting === 1) {
        this.orderBy = "reduceAmount";
      } else {
        this.orderBy = "expireEndDate";
      }
      this.getMemberGiftCardsListData(
        this.TabStatus,
        this.orderBy,
        this.sequence,
        this.number
      );
    },
    // 翻页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getMemberGiftCardsListData(
        this.TabStatus,
        this.orderBy,
        this.sequence,
        this.number
      );
    },
    // 搜索
    Search(event, TabStatus) {
      console.log("搜索", event, TabStatus);
      this.number = event;
      this.getMemberGiftCardsListData(
        this.TabStatus,
        this.orderBy,
        this.sequence,
        this.number
      );
    },
    // 获取礼品卡数据
    getMemberGiftCardsListData(status, orderBy, sequence, number) {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          param: {
            status: status, // 查询礼品卡状态, 0:UNUSED(“未使用”), 1:USED(“已使用”), 2:OBSOLETE(“已作废”), 9为已转让礼品卡，特殊状态，不在枚举里面
            pageIndex: this.pageIndex, // 分页索引
            pageSize: this.pageSize, // 单页数据量
            orderBy: orderBy, // 排序字段
            sequence: sequence, // 1.倒序 0升序
            number: number,
          },
        },
      };
      this.$api.person.getMemberGiftCardsList(params).then((res) => {
        console.log("获取礼品卡数据", res);
        this.GiftcardListData = res.data.MemberGiftCards;
        this.PageTotal = res.data.count;
      });
    },
  },
};
</script>

<style style lang='scss' scoped>
#Giftcard {
  .titleBox {
    display: flex;
    flex-direction: row;
    padding: 2.75rem 2.63rem 0 2.63rem;
    align-items: center;
    background: #fff;

    .title {
      font-size: 1.13rem;
      color: #333;
    }
  }

  .cardBox {
    background-color: #fff;
    padding: 1.75rem 2.62rem;
    margin-bottom: 0.45rem;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.06rem solid rgba(216, 216, 216, 1);
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .title {
          cursor: pointer;
          font-size: 1.13rem;
          padding: 0.63rem 0.94rem;
          position: relative;
          &.active {
            color: #f0406f;
            position: relative;
            padding: 0.63rem 0.94rem;
            border-bottom: 0.31rem solid rgba(240, 64, 111, 1);
          }
        }
      }
      .buttons {
        font-size: 0.8rem;
        border: 1px solid rgba(216, 216, 216, 1);
        border-radius: 10px;
        color: #666;
        padding: 0.5rem 1rem;
        cursor: pointer;
      }
    }
  }
  .search_box {
    background: #fff;
    padding: 1.75rem 2.62rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      .vif_box {
        display: flex;
        .item {
          font-size: 0.9rem;
          padding: 0 0.4rem;
          &.activesmall {
            color: #f0406f;
          }
        }
        .sm {
          cursor: pointer;
        }
      }
      .el-input__suffix {
        cursor: pointer !important;
      }
    }
  }

  .list_box {
    background: #fff;
    margin-top: 0.45rem;
    padding: 1.75rem 0;
  }
}
</style>
